<template>
  <div v-loading="loading" class="h-100 flex algin-center">
    <div v-if="isData" ref="chart" class="w-100 h-100" style="width: 100%; height: 100%" />
    <NullData v-else type="bar" />
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import { changeDecimal } from '@/utils/common'
  import commonMixin from './js/commonMixin'

  export default {
    mixins: [commonMixin],
    data() {
      return {
        isData: true,
        loading: false
      }
    },
    computed: {},
    created() {
      this.$nextTick(() => {
        this.renderChart()
      })
    },
    methods: {
      renderChart() {
        this.isData = true
        this.statusChart && this.statusChart.clear()
        this.statusChart && this.statusChart.resize()
        if (!this.statisticsData.cableList.length) {
          this.isData = false
          this.statusChart = null
          return
        }
        const colorData =
          this.getTheme === 'dark-theme'
            ? [
              { offset: 0, color: 'rgba(43, 75, 245, 1)' },
              { offset: 1, color: 'rgba(2, 164, 255, 1)' }
            ]
            : [
              { offset: 0, color: 'rgba(83, 140, 248, 1)' },
              { offset: 1, color: 'rgba(107, 200, 255, 1)' }
            ]
        this.statisticsData.cableList.sort((a, b) => Number(b.value) - Number(a.value))
        const defaultEnd =
          this.statisticsData.cableList.length < 10
            ? 100
            : parseInt(1000 / this.statisticsData.cableList.length)
        const chartData = this.statisticsData.cableList.map(i => [i.name, changeDecimal(i.value)])
        const _this = this
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            ..._this.tooltipOptions()
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 0,
            top: 25,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            ..._this.axisOptions(),
            axisLabel: {
              rotate: -45,
              padding: [0, 0, 0, -7],
              margin: 13,
              fontSize: this.resetSize(12),
              color: _this.homeAxisText(),
              formatter: (value, index) => {
                return value.length > 3 ? value.substring(0, 2) + '...' : value
              }
            }
          },
          yAxis: {
            type: 'value',
            name: _this.$t('LENGTH_KM'),
            ..._this.axisOptions(),
            nameTextStyle: {
              align: 'center',
              padding: [0, 0, -5, 0],
              fontSize: this.resetSize(10),
              color: _this.homeAxisText()
            }
          },
          dataZoom: [
            {
              type: 'inside',
              end: defaultEnd,
              minValueSpan: 2
            },
            {
              type: 'slider',
              height: 6,
              bottom: 0,
              showDetail: false,
              borderColor: 'transparent',
              backgroundColor: 'transparent',
              fillerColor: 'transparent'
            }
          ],
          series: [
            {
              type: 'bar',
              barWidth: 15,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, colorData)
              },
              data: chartData
            }
          ]
        }
        this.$nextTick(() => {
          !this.statusChart && (this.statusChart = echarts.init(this.$refs.chart))
          this.statusChart.setOption(option)
        })
      }
    }
  }
</script>
<style lang="scss" scoped></style>
